<template>
    <div class="admin">
        <div class="admin-left"></div>
        <div class="admin-right">
            <h3>商品列表</h3>
            <el-popconfirm
                size="mini"
                title="确定退出登陆吗？"
                type="primary"
                style="position:fixed; right:40px; top:20px; "
                @confirm="out"
                >
                <el-button slot="reference">退出</el-button>
            </el-popconfirm>
            <!--添加商品列表-->
            <el-button style="position:relative; left:40px;" 
            @click="showList = !showList" 
            icon="el-icon-edit" 
            type="primary"
            >添加商品</el-button>
            <!---->
                <el-form v-model="newList" 
                style="width:600px; 
                height:400px;  
                background:#fff; 
                position:fixed; 
                z-index:9; 
                top:100px; 
                left:30%;
                box-shadow:0 0 6px #333; 
                padding-top:20px;"
                ref="numberValidateForm" label-width="100px" class="demo-ruleForm" v-if="showList">
                    <el-form-item
                         label="添加商品"
                    ></el-form-item>
                    <el-form-item
                        label="兑换商品所需积分"
                        prop="price"
                    >
                        <el-input style="width:440px"  v-model="newList.price" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="商品名称"
                        prop="name"
                    >
                        <el-input style="width:440px"  v-model="newList.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="图片"
                        prop="image"
                    >
                        <el-input style="width:440px"  v-model="newList.image" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm">提交</el-button>
                        <el-button @click="showList = !showList">取消</el-button>
                    </el-form-item>
                </el-form>
            <!--商品列表-->
            <el-table
                class="table"
                :data="list"
                style="width: 100%"
                >
                <el-table-column
                label="商品ID"
                width="220">
                <template slot-scope="scope" 
                >
                    <span style="margin-left: 10px" 
                >{{ scope.row._id }}</span>
                </template>
                </el-table-column>
                <el-table-column
                label="商品名称"
                width="360">
                <template slot-scope="scope">
                    <p>{{ scope.row.name }}</p>
                </template>
                </el-table-column>
                <el-table-column
                label="商品积分"
                width="160">
                <template slot-scope="scope">
                    <p>{{ scope.row.price }}</p>
                </template>
                </el-table-column>
                <el-table-column
                label="图片"
                width="200">
                <template  slot-scope="scope">
                    <img :src="scope.row.image" />
                </template>
                </el-table-column>
                <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    type="primary" icon="el-icon-edit"
                    @click="setList(scope.$index)">编辑</el-button>
                    <el-popconfirm
                    size="mini"
                    title="这是一段内容确定删除吗？"
                    @confirm="handleDelete(scope.$index, scope.row)"
                    >
                    <el-button slot="reference"
                    type="danger" icon="el-icon-delete"
                    >删除</el-button>
                </el-popconfirm>
                </template>
                </el-table-column>
            </el-table>
            <!--编辑按钮-->
            <el-form v-model="list" 
            style="width:600px; 
            height:400px;  
            background:#fff; 
            position:fixed; 
            z-index:9; 
            top:100px; 
            left:30%;
            box-shadow:0 0 6px #333; 
            padding-top:60px;"
            ref="numberValidateForm" label-width="100px" class="demo-ruleForm" v-if="set">
                <el-form-item label="编辑商品"></el-form-item>
                <el-form-item
                    label="兑换商品所需积分"
                    prop="price"
                >
                    <el-input style="width:440px" type="data" v-model="newList.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item
                    label="商品名称"
                    prop="name"
                >
                    <el-input style="width:440px" type="data" v-model="newList.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item
                    label="图片"
                    prop="image"
                >
                    <el-input style="width:440px" type="data" v-model="newList.image" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="setRow">提交</el-button>
                    <el-button @click="set=!set">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import {  mapMutations } from 'vuex'

export default ({
   name:'admin',
   data(){
       return{
           showList:false,
           newList:[],
           list:JSON.parse(localStorage.getItem('list')) ,
           set:false
       }
   },
   watch:{
        list:{
            handler(newVal){
               console.log('newVAl',newVal)
               localStorage.setItem('list',JSON.stringify(newVal))
            },
            deep:true
        }
    },
   created(){
       this.show();
       this.newList = JSON.parse(JSON.stringify(this.$store.state.login))
       console.log('',JSON.parse(JSON.stringify(this.$store.state.login)))
   },
   methods:{
        ...mapMutations(['showlogin']),
        setList( index ){
            this.set = !this.set
            this.newList = JSON.parse(JSON.stringify(this.list[index]))//深拷贝赋值
        },
        //修改行
        async setRow(){
            const data = await this.aPut('/admin/shopItem',{
                data:{
                    _id:this.newList._id,
                    name:this.newList.name,
                    price:this.newList.price,
                    image:this.newList.image
                }
            });
            console.log('data',data)
            this.set = !this.set
            this.show();
            this.newList=[];
        },  
        //初始化获取数据列表
        async show(){
            const data = await this.aGet('/admin/shopList');
            this.list = data
        },
        //删除
        async handleDelete(index){
            console.log(this.list[index]._id)
            const data = await this.aDel('/admin/shopItem',{
                id: this.list[index]._id
            },);
            console.log(data)
            this.list[index].isDeleted= true;
            this.show();
        },
        //提交按钮
        async submitForm(){
            const data = await this.aPost('/admin/shopitem',{
                name:this.newList.name,
                image:this.newList.image,
                price:this.newList.price,
            });
            this.showList = !this.showList
            this.list = data.data;
            this.show();
            this.newList = []
        },
        //退出清空缓存
        out(){
            localStorage.clear();
            this.$router.push({
                name:'login'
            })
        },
    }
})
</script>
<style>
.admin-left{
    width: 40px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background: #262626;
}
img{
    width: 140px;
    height: 140px;
}
h3{
    width: 100px;
}
.admin-right{
    margin-left: 40px;
}
</style>
